<template>
    <div>
        <Dialog :open="dialogStore.isOpen" @update:open="handleClose">
            <DialogContent class="max-h-full overflow-y-scroll !w-[700px]">
                <DialogTitle>选择插件节点</DialogTitle>

                <div v-for="(item, index) in pluginListArray" :key="index" class="p-2 rounded-md bg-gray-100">
                    <CollapsibleRoot>
                        <CollapsibleTrigger class="flex w-full justify-between items-center">
                            <div class="text-left flex items-center">
                                <Fan class="mr-2" color="#3b82f6" />
                                <div>
                                    <h3 class="font-bold flex">
                                        {{ item.name }}
                                    </h3>
                                    <p class="text-gray-500">{{ item.desc }}</p>
                                </div>
                            </div>
                            <ChevronRight v-if="!item.open" />
                            <ChevronDown v-else />
                        </CollapsibleTrigger>
                        <CollapsibleContent v-if='item.apisList'>
                            <div class="p-2 flex justify-between items-center" v-for="(el, index) in item.apisList">
                                <div>
                                    <h4>{{ el.name }}</h4>
                                    <p class="text-gray-500 text-xs">{{ el.desc }}</p>
                                </div>
                                <div>
                                    <Button @click="() => addPluginNode(el)">
                                        添加
                                    </Button>
                                </div>
                            </div>
                        </CollapsibleContent>
                    </CollapsibleRoot>
                </div>
                <DialogClose />
            </DialogContent>
        </Dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, watch, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { Dialog, DialogContent, DialogTrigger, DialogClose, DialogTitle } from '@/components/ui/dialog'
import { CollapsibleRoot, CollapsibleContent, CollapsibleTrigger } from 'radix-vue'
import storeMap from '@/pina/index'
import { pluginList } from '@/api/index';
import { IPluginList } from '@/api/data'
import { ChevronRight, ChevronDown, Component, Fan } from 'lucide-vue-next';
import { Button } from '@/components/ui/button'
import { getPluginApi } from '@/api/index'
import { useNode } from '@vue-flow/core'
const open = ref(false)
const dialogStore = storeMap.useDialogStore()
const pluginStore = storeMap.usePluginStore()
const handleClose = () => {
    dialogStore.close()
}
const { isOpen } = storeToRefs(dialogStore);
const pluginListArray = ref<IPluginList[]>([])
const addPluginNode = (data: any) => {
    dialogStore.addNode()
    pluginStore.addPluginNode({...data})
}
watch(isOpen, (n, o) => {
    if (n) {
        pluginList({
            pageNo: 1,
            pageSize: 20,
            name: '',
            publish_status: ''
        }).then((res: any) => {
            const { list = [] } = res?.data ? res.data : {};
            pluginListArray.value = list.map((item: any) => {
                item.open = false;
                item.apisList = [];
                item.apis?.map(async (el: any) => {
                    const { data = {} } = await getPluginApi({ id: el.apiId })
                    const { name, desc, requestParams, responseParams } = data;
                    item.apisList.push({
                        id: el.apiId,
                        name, desc, requestParams: JSON.parse(requestParams), responseParams: JSON.parse(responseParams)
                    })
                })
                return item;
            });
        })
    }
}, {
    deep: true
})

</script>
